import React from "react";
import { Section, Input, ContextHelp } from "@/components/visualizations/editor";
import { createDateTimeFormatter } from "@/lib/value-format";

function Editor({ column, onChange }) {
  return (
    <Section>
      <Input
        label={
          <React.Fragment>
            默认值
            <ContextHelp.FunctionFormatSpecs />
          </React.Fragment>
        }
        defaultValue={column.defaultValue}
        onChange={event => onChange({ defaultValue: event.target.value })}
      />
    </Section>
  );
}

export default function initHiddenColumn(column) {
  const format = createDateTimeFormatter(column.dateTimeFormat);

  function prepareData(row) {
    return {
      text: format(row[column.name]),
    };
  }

  function DateTimeColumn({ row }) {
    // eslint-disable-line react/prop-types
    const { text } = prepareData(row);
    return text;
  }

  DateTimeColumn.prepareData = prepareData;

  return DateTimeColumn;
}

initHiddenColumn.friendlyName = "隐藏";
initHiddenColumn.Editor = Editor;
